<template>
    <div class="homework-box">
        <div class="basic" v-if="basicShow">
            <div class="search-row">
                <div class="search-item">
                    <el-input v-model="question" placeholder="请输入课程名称"></el-input>
                    <el-select v-model="value" class="m-2" placeholder="请选择作业类型">
                        <el-option key="o" label="选择题" value="选择题" />
                        <el-option key="o" label="填空题" value="填空题" />
                    </el-select>
                    <el-select v-model="value" class="m-2" placeholder="请选择作业状态">
                        <el-option key="o" label="已完成" value="已完成" />
                        <el-option key="o" label="未完成" value="未完成" />
                    </el-select>
                    <el-button> <el-icon><Search /></el-icon>查询 </el-button>
                    <el-button @click="uploadBook()"> <el-icon><RefreshLeft /></el-icon>重置 </el-button>
                </div>
            </div>
            <el-scrollbar height="700px">
                <div class="homework-list">
                    <div class="homework-item" v-for="o in 14" :key="o" @click="basicShow = !basicShow">
                        <div class="topitem">
                            <div class="leftitem">
                                <div class="title">高数09月23日课后作业</div>
                                <div class="subtitle">机械工程学院</div>
                                <div class="subtitle">刘老师</div>
                            </div>
                            <div class="rightitem">
                                <img src="@/assets/homework-icon.png" alt="">
                            </div>
                        </div>
                        <div class="tages">
                            <span class="endtime">截止时间{{ endtime }}</span>
                            <span class="status">{{ status }}</span>
                            <span class="timestatus">{{ timestatus }}</span>
                        </div>
                        <div class="requirement">
                            <div class="title">作业要求</div>
                            <div class="desc">作业要求内容占位作业要求内容占位作业要求内容占位作业要求内容占位作业要求内容占位作业要求内容占位作业要求内容占位作业要求内容占位作业要求内容占位作业要求内容占位作业要求内容占位作业要求内容占位作业要求内容占位作业要求内容占位作业要求内容占位作业要求内容占位作业要求内容占位作业要求内容占位作业要求内容占位作业要求内容占位作业要求内容占位作业要求内容占位作业要求内容占位作业要求内容占位作业要求内容占位作业要求内容占位作业要求内容占位作业要求内容占位作业要求内容占位作业要求内容占位作业要求内容占位作业要求内容占位作业要求内容占位作业要求内容占位作业要求内容占位作业要求内容占位</div>
                        </div>
                    </div>
                </div>
            </el-scrollbar>
        </div>
        <div class="desc" v-else>
            <div class="tops">
                <div class="class-title">
                    <div class="left"></div>
                    <div class="right">作业详情</div>
                </div>
                <div class="back-btn" @click="basicShow = !basicShow">
                    <img src="@/assets/back.png" alt="">
                    <span>返回</span>
                </div>
            </div>
            <div class="home-content">
                <div class="title">作业名字内容占位</div>
                <div class="tages">
                    <span class="endtime">截止时间{{ endtime }}</span>
                    <span class="status">{{ status }}</span>
                    <span class="timestatus">{{ timestatus }}</span>
                </div>
                <div class="desc">作业要求内容占位作业要求内容占位作业要求内容占位作业要求内容占位作业要求内容占位作业要求内容占位作业要求内容占位作业要求内容占位作业要求内容占位作业要求内容占位作业要求内容占位作业要求内容占位作业要求内容占位作业要求内容占位作业要求内容占位作业要求内容占位作业要求内容占位作业要求内容占位作业要求内容占位作业要求内容占位作业要求内容占位作业要求内容占位作业要求内容占位作业要求内容占位作业要求内容占位作业要求内容占位作业要求内容占位作业要求内容占位作业要求内容占位作业要求内容占位作业要求内容占位作业要求内容占位作业要求内容占位作业要求内容占位作业要求内容占位作业要求内容占位</div>
            </div>
            <div class="home-content homework">
                <div class="title">作业内容占位</div>
                <el-scrollbar height="340px">
                    <div class="table-area">
                        <el-table ref="multipleTableRef" :data="pager" style="width: 100%;margin-top: 30px;">
                            <el-table-column prop="name" label="作业文件" />
                            <el-table-column prop="knowledge" label="知识点名称" />
                            <el-table-column label="操作" align="center" width="150">
                                <template #default="scope">
                                    <div class="material-operations">
                                        <el-link type="primary"  @click="graphView(scope.row)" :underline="false">下载</el-link>
                                        <el-link type="success"  @click="graphView(scope.row)" :underline="false">上传</el-link>
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="pages">
                            <el-pagination small background layout="prev, pager, next" :total="50" class="mt-4" />
                        </div>
                    </div>
                </el-scrollbar>
                <div class="submit-btn">
                       <el-button type="primary">提交作业</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
    import { ref } from 'vue'
    import { RefreshLeft,Search } from '@element-plus/icons-vue'
    const endtime = ref("2025-9-22 12:45:37")
    const status  = ref("未完成")
    const timestatus  = ref("已超时")
    const basicShow  = ref(true)
    const pager = ref([
        {
            name: '作业文件内容占位作业文件内容占位.pdf',
            knowledge: '知识点名称',
        },{
            name: '作业文件内容占位作业文件内容占位.pdf',
            knowledge: '知识点名称',
        },{
            name: '作业文件内容占位作业文件内容占位.pdf',
            knowledge: '知识点名称',
        },{
            name: '作业文件内容占位作业文件内容占位.pdf',
            knowledge: '知识点名称',
        },{
            name: '作业文件内容占位作业文件内容占位.pdf',
            knowledge: '知识点名称',
        },{
            name: '作业文件内容占位作业文件内容占位.pdf',
            knowledge: '知识点名称',
        },{
            name: '作业文件内容占位作业文件内容占位.pdf',
            knowledge: '知识点名称',
        },{
            name: '作业文件内容占位作业文件内容占位.pdf',
            knowledge: '知识点名称',
        }
    ]);
</script>
<style scoped>
    .tops{display: flex;flex-direction: row;justify-content: space-between;margin-top: 10px;}
    .class-title{display: flex;flex-direction: row;align-items: center;}
    .class-title{padding-top: 10px;}
    .class-title .left{height: 15px;width: 5px;background: #0457D5;border-radius: 5px;margin-left: 15px;}
    .class-title .right{margin-left: 5px;font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 18px;font-weight: 600;}
    .back-btn{ padding: 5px 20px;color: #1465E1;font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 14px;display: flex;flex-direction: row;gap: 5px;align-items: center;border: 1px solid #1465E1;border-radius: 4px;cursor: pointer;margin-right: 20px; }
    .back-btn img{width: 20px;height: 20px;}
    .homework-box{width: 100%;}
    .basic{background: #fff;padding: 20px 0 20px 0;border-radius: 8px;}
    .top-work{display: flex;flex-direction: row;justify-content: space-between;margin: 20px;}
    .topwork-item{box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1); border-radius: 10px;background: linear-gradient( 135deg, #E4EFFE 0%, #E5F1FD 100%);height: 80px;display: flex;flex-direction: row;padding: 20px;flex: 0 0 20%;cursor: pointer;}
    .topwork-item .left{display: flex;flex-direction: column;flex: 0 0 80%;display: flex;flex-direction: column;align-items: start;justify-content: center;}
    .topwork-item .left .item-li{text-align: left;font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 16px;}
    .topwork-item .left .item-desc{text-align: left;margin-top: 10px;font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 14px;font-weight: 600;}
    .topwork-item .right{display: flex;flex-direction: row;flex: 0 0 20%;justify-content: end;align-items: center;}
    .topwork-item .right img{width: 50px;height: 50px;}
    .tabs{margin: 20px 20px 0 20px;}
    :deep(.el-tabs__active-bar){background: #1465E1;}
    :deep(.el-tabs__item.is-active){color: #1465E1;}
    :deep(.el-tabs__item:hover){color: #1465E1;}
    :deep(.el-input){flex: 0 0 10%;height: 35px;}
    :deep(.el-select){flex: 0 0 10%;height: 35px;}
    :deep(.el-select__wrapper){height: 35px;background: #F2F3FA}
    :deep(.el-input__wrapper){background: #F2F3FA!important;}
    :deep(.el-table__row:nth-child(odd)){background: #ffffff!important;}
    :deep(.el-table__row:nth-child(even)){background: #F5F8FE!important;}
    :deep(.el-table th.el-table__cell) { background: #C4D8F5; }
    :deep(.el-table .cell){color: #000;}
    .search-row { padding: 0 20px; }
    .search-item { width: 100%;display: flex;flex-direction: row;gap: 20px; }
    .el-button:hover{color: #1465E1!important;border: 1px solid #1465E1;}
    .el-button--primary{background: #1465E1!important;border: 1px solid #1465E1;}
    .el-button--primary:hover{color: #fff!important;}
    .homework-list{display: flex;flex-wrap: wrap;padding: 20px 20px 40px 20px;gap: 35px; }
    .homework-item{padding: 15px 50px 15px 25px;background: linear-gradient( 135deg, rgba(139,185,255,0.16) 0%, rgba(54,123,229,0.3) 100%);border-radius: 8px;cursor: pointer;flex: 0 0 17%; }
    .homework-item .topitem{display: flex;flex-direction: row;}
    .homework-item .topitem .leftitem{display: flex;flex-direction: column;text-align: left;flex: 0 0 70%;gap: 5px;}
    .homework-item .topitem .leftitem .title{font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 16px;font-weight: 600;color: #000;}
    .homework-item .topitem .leftitem .subtitle{font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 14px;color: #5D5D5D;}
    .homework-item .topitem .rightitem{flex: 0 0 40%;}
    .homework-item .topitem .rightitem img{width: 120px;height: 120px;}
    .homework-item .tages{margin-top: -40px;}
    .desc .tages{padding: 10px 0 0 20px;}
    .tages{display: flex;flex-direction: row;gap: 10px;}
    .tages .endtime{ display: block;background: rgba(56,105,231,0.2);border-radius: 5px;border: 1px solid #3869E7;font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 12px;padding: 2px 5px 2px 5px;color: #0B37AA; }
    .tages .status{ display: block;background: rgba(228,138,45,0.2);border-radius: 5px;border: 1px solid #E48A2D;font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 12px;padding: 2px 5px 2px 5px;color: #BA6208; }
    .tages .timestatus{ display: block;background: rgba(249,69,69,0.2);border-radius: 5px;border: 1px solid #F94545;font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 12px;padding: 2px 5px 2px 5px;color: #CC1616; }
    .homework-item .requirement{ display: flex;flex-direction: column;gap: 10px;padding-bottom: 10px; }
    .homework-item .requirement .title{ font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 14px;font-weight: 600;color: #000;text-align: left;margin-top: 10px; }
    .homework-item .requirement .desc{ width: 320px;font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 12px;color: #5D5D5D;display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; text-overflow: ellipsis; }
    .home-content{background: #fff;width: 100%;padding: 20px 0 10px 0;border-radius: 8px;margin-top: 20px;}
    .home-content .title{ font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 16px;font-weight: 600;text-align: left;padding: 0 0 10px 20px; }
    .home-content .desc{ width: calc(100% - 40px);font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 14px;color: #5D5D5D;display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; text-overflow: ellipsis;margin: 20px;text-align: left; }
    .table-area{width: calc(100% - 40px);margin: -20px  auto;padding-bottom: 50px; }
    .pages{display: flex;flex-direction: row;justify-content: end;padding-top: 30px;}
    .material-operations{display: flex;flex-direction: row;gap: 10px;justify-content: center;}
    .homework{height: 450px;display: flex;flex-direction: column;position: relative;}
    .submit-btn{position: absolute;bottom: 30px;right: 30px;}
</style>